<!-- 聊天记录模式演示(vue)，加载更多聊天记录无闪动 -->
<!-- nvue的聊天记录模式中需要写@cellStyleChange="cellStyleChange"，如果需要兼容nvue和vue，请以nvue中写法为准，会自动兼容vue -->
<!-- 注意，此写法由于将列表倒置了，在iOS15以下和部分较低版本安卓中可能出现列表无法滚动的问题，此时建议使用z-paging 2.7.0以下的版本及写法 -->
<template>
  <view class="content">
    <!-- use-chat-record-mode：开启聊天记录模式 -->
    <!-- safe-area-inset-bottom：开启底部安全区域适配 -->
    <!-- bottom-bg-color：设置slot="bottom"容器的背景色，这里设置为和chat-input-bar的背景色一致 -->
    <z-paging
      ref="paging"
      v-model="dataList"
      use-chat-record-mode
      safe-area-inset-bottom
      bottom-bg-color="#f8f8f8"
      @query="queryList"
      @keyboardHeightChange="keyboardHeightChange"
      @hidedKeyboard="hidedKeyboard"
    >
    <template #top>
      <view class="ai-notice" >
        <text class="ai-notice-text">本服务为AI生成内容，结果仅供参考</text>
      </view>
    </template>

      <!-- AI生成内容合规标识 - 放在聊天列表内部的顶部 -->
  
      
      <!-- 顶部提示文字 -->
      <!-- #ifdef H5 || MP-BAIDU || MP-TOUTIAO -->

      <!-- #endif -->
      <!-- for循环渲染聊天记录列表 -->
      <view
        v-for="(item, index) in dataList"
        :key="index"
        style="position: relative"
      >
        <!-- 如果要给聊天item添加长按的popup，请在popup标签上写style="transform: scaleY(-1);"，注意style="transform: scaleY(-1);"不要写在最外层，否则可能导致popup被其他聊天item盖住 -->
        <!-- <view class="popup" style="transform: scaleY(-1);">popUp</view> -->
        <!-- style="transform: scaleY(-1)"必须写，否则会导致列表倒置 -->
        <!-- 注意不要直接在chat-item组件标签上设置style，因为在微信小程序中是无效的，请包一层view -->
        <view style="transform: scaleY(-1)" @click="handleCopy(item)">
          <chat-item :item="item"></chat-item>
        </view>
      </view>
      <!-- 底部聊天输入框 -->
      <template #bottom>
        <chat-input-bar ref="inputBar" @send="doSend" />
      </template>
    </z-paging>
  </view>
</template>

<script>
import { ai, listByStudent, getMineInfo } from "../../api/index";
export default {
  data() {
    return {
      // v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
      dataList: [],
      info: {},
    };
  },

  onLoad() {
    this.getMineInfo();
    wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
  },
  methods: {
    getMineInfo() {
      getMineInfo().then((res) => {
        this.info = res.data;
      });
    },
    handleCopy(value) {
      console.log(value, "eeeeeeeeeeeeee");
      const app = this;
      uni.setClipboardData({
        data: value.content,
        success: () => app.$toast("复制成功"),
        fail: ({ errMsg }) => app.$toast("复制失败 " + errMsg),
      });
    },
    queryList(pageNo, pageSize) {
      // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
      // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
      // 模拟请求服务器获取分页数据，请替换成自己的网络请求
      const params = {
        pageNo: pageNo,
        pageSize: pageSize,
      };
      listByStudent().then((res) => {
        // res.rows.forEach(i => {
        //   i.name = this.info.userName
        //   i.icon = this.info.imgUrl
        // });
        this.dataList = res.rows;
        this.dataList = this.splitArray(this.dataList);
        this.$refs.paging.complete(this.dataList);
      });
      // this.$refs.paging.complete([{"name":"哆啦A梦","icon":"/static/duola.jpg","content":"年初北京冬奥会，中国男冰首次参赛，虽没能拿到一场胜利，但小伙子们打出了可贵的精神。两周前，以征战冬奥会为班底的中国男冰在意大利集结，备战世锦赛乙级A组比赛。今年的乙级A组比赛在克罗地亚萨格勒布进行，与中国男冰同组的有以色列、荷兰、克罗地亚和西班牙队。从乙级A组这几支队伍水平来看，世界排名第27位的中国队实力占优。前两轮比赛，中国队先是14比1大胜以色列队，随后5比1战胜同组实力最强的荷兰队。连胜两场后，叶劲光、郑恩来、福帅等中国队员均表示，要再接再厉提前完成升组任务。","isMe":false},{"name":"哆啦A梦","icon":"/static/duola.jpg","content":"差不多3个小时的等待后，终于等来了警察。一辆警车，闪着警灯，在前头开道。高音喇叭响着，“大车司机不许下车，跟我走。”4月19日，烟台港。43岁的卡车司机张广忠和他的卡车，都要在这坐轮渡去大连。见到穿防护服的工作人员，他立马戴上口罩，抓起购票时给的封条，跳下驾驶室。","isMe":false},{"name":"哆啦A梦","icon":"/static/duola.jpg","content":"年初北京冬奥会，中国男冰首次参赛，虽没能拿到一场胜利，但小伙子们打出了可贵的精神。两周前，以征战冬奥会为班底的中国男冰在意大利集结，备战世锦赛乙级A组比赛。今年的乙级A组比赛在克罗地亚萨格勒布进行，与中国男冰同组的有以色列、荷兰、克罗地亚和西班牙队。从乙级A组这几支队伍水平来看，世界排名第27位的中国队实力占优。前两轮比赛，中国队先是14比1大胜以色列队，随后5比1战胜同组实力最强的荷兰队。连胜两场后，叶劲光、郑恩来、福帅等中国队员均表示，要再接再厉提前完成升组任务。","isMe":false},{"name":"哆啦A梦","icon":"/static/duola.jpg","content":"话剧《简·爱》经典再启 朱杰濮存昕携手演绎","isMe":false},{"name":"哆啦A梦","icon":"/static/duola.jpg","content":"差不多3个小时的等待后，终于等来了警察。一辆警车，闪着警灯，在前头开道。高音喇叭响着，“大车司机不许下车，跟我走。”4月19日，烟台港。43岁的卡车司机张广忠和他的卡车，都要在这坐轮渡去大连。见到穿防护服的工作人员，他立马戴上口罩，抓起购票时给的封条，跳下驾驶室。","isMe":false},{"name":"哆啦A梦","icon":"/static/duola.jpg","content":"人民日报写在“五一”国际劳动节：团结奋斗，在新征程上创造新的历史伟业","isMe":false},{"name":"哆啦A梦","icon":"/static/duola.jpg","content":"话剧《简·爱》经典再启 朱杰濮存昕携手演绎","isMe":false},{"name":"哆啦A梦","icon":"/static/duola.jpg","content":"根据世卫组织最新实时统计数据，截至欧洲中部夏令时间4月29日17时47分（北京时间4月29日23时47分），全球累计新冠肺炎确诊病例510270667例，累计死亡病例6233526例。29日全球新冠肺炎确诊病例新增607159例，死亡病例新增2504例。（总台记者 朱赫）","isMe":false},{"name":"哆啦A梦","icon":"/static/duola.jpg","content":"根据世卫组织最新实时统计数据，截至欧洲中部夏令时间4月29日17时47分（北京时间4月29日23时47分），全球累计新冠肺炎确诊病例510270667例，累计死亡病例6233526例。29日全球新冠肺炎确诊病例新增607159例，死亡病例新增2504例。（总台记者 朱赫）","isMe":false},{"name":"哆啦A梦","icon":"/static/duola.jpg","content":"差不多3个小时的等待后，终于等来了警察。一辆警车，闪着警灯，在前头开道。高音喇叭响着，“大车司机不许下车，跟我走。”4月19日，烟台港。43岁的卡车司机张广忠和他的卡车，都要在这坐轮渡去大连。见到穿防护服的工作人员，他立马戴上口罩，抓起购票时给的封条，跳下驾驶室。","isMe":false}]);

      // queryChatList(params).then(res => {
      //
      //   // 将请求的结果数组传递给z-paging
      // }).catch(res => {
      //
      //   // 如果请求失败写this.$refs.paging.complete(false);
      //   // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
      //   // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
      //   this.$refs.paging.complete(false);
      // })
    },

    splitArray(arr) {
      const result = [];
      arr.forEach((item) => {
        result.push({ content: item.answerContent, isMe: false });
        result.push({ content: item.userContent, isMe: true });
      });
      return result;
    },
    // 监听键盘高度改变，请不要直接通过uni.onKeyboardHeightChange监听，否则可能导致z-paging内置的键盘高度改变监听失效（如果不需要切换表情面板则不用写）
    keyboardHeightChange(res) {
      this.$refs.inputBar.updateKeyboardHeightChange(res);
    },
    // 用户尝试隐藏键盘，此时如果表情面板在展示中，应当通知chatInputBar隐藏表情面板（如果不需要切换表情面板则不用写）
    hidedKeyboard() {
      this.$refs.inputBar.hidedKeyboard();
    },
    // 发送新消息
    doSend(msg) {
      uni.showLoading({
        title: "发送中...",
      });
      setTimeout(() => {
        this.$refs.paging.addChatRecordData({
          time: "",
          icon: "/static/daxiong.jpg",
          name: "大雄",
          content: msg,
          isMe: true,
        });
        let params = {
          userContent: msg,
        };
        ai(params).then((res) => {
          uni.hideLoading();
          this.queryList();
        });
      }, 500);
    },
  },
};
</script>

<style scoped>
/* AI生成内容合规标识样式 */
.ai-notice {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 12rpx 24rpx;
  text-align: center;
  position: sticky;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -2rpx 4rpx rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.ai-notice-text {
  color: #ffffff;
  font-size: 22rpx;
  font-weight: 500;
  letter-spacing: 0.5rpx;
  line-height: 1.4;
}

.header {
  background-color: red;
  font-size: 20rpx;
  padding: 20rpx;
  color: white;
}

.popup {
  position: absolute;
  top: -20px;
  height: 200rpx;
  width: 400rpx;
  background-color: red;
  z-index: 1000;
}
</style>
